<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="batchDialog"
    width="45%"
    customClass="mes_dialog work_order_batch"
    v-dialogDrag
    :close-on-click-modal="false">
    <div class="dialog_top">
      <span class="dialog_alert">{{dialogAlert}}</span>
      <span class="jump_item log_btn" @click="showLog">操作记录</span>
    </div>
    <div class="table_container" v-if="batchList.length">
      <el-table
        border
        stripe
        style="width: 100%"
        ref="mesTable"
        max-height="440"
        :data="batchList"
        @row-click="row => $refs.mesTable.toggleRowSelection(row)"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <mes-col-comp
          v-for="(item, index) in tableColConfig"
          :key="index"
          :column="item"></mes-col-comp>
      </el-table>
    </div>
    <div class="dialog_remarks">
      <el-input
        type="textarea"
        resize="none"
        v-model="remarks"
        maxlength="255"
        :autosize="{ minRows: 1, maxRows: 3}"
        placeholder="请输入说明原因，非必填">
      </el-input>
    </div>
    <div slot="footer" class="batch_footer">
      <div class="pause_btn">
        <el-checkbox v-model="isInputSemisStore" v-if="warehousingBtn">
          在制品入库<span class="pause_alert">（只有周转进度状态为“生产中”的才能发起）</span></el-checkbox>
      </div>
      <div class="mes_btn">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="batchDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// 工单暂停
const PAUSE = 'ID_WAT_Pause'
// 工单恢复
const RESUME = 'ID_WAT_Resume'
// 工单终止
const TERMINATE = 'ID_WAT_Terminate'

export default {
  name: 'WorkOrderBatch',
  data() {
    return {
      batchDialog: false, // 显示弹框
      batchList: [], // 批次列表
      type: '', // 操作类型
      dialogTitle: '', // 标题
      dialogAlert: '', // dialog提示
      remarksTitle: '', // 备注标题
      remarks: '', // 备注
      selectBatch: [], // 选中批次
      isInputSemisStore: false, // 在制品入库按钮是否已选
      tableColConfig: [
        {prop: 'number', label: '周转码', colConfig: {minWidth: 240, align: 'left', sortable: false}},
        {prop: 'productionQuantity', label: '数量', colConfig: {width: 50, sortable: false}},
        {prop: 'currentWorkstageSort', label: '当前工序序号', colConfig: {width: 110, sortable: false}},
        {prop: 'currentWorkstageName', label: '当前工序名称', colConfig: {minWidth: 100, sortable: false}},
        {
          prop: 'turnoverStatusLabel',
          label: '周转状态',
          colConfig: {width: 90, sortable: false, comp: 'turnoverStatus'}
        },
        {
          prop: 'processStatusLabel',
          label: '周转进度',
          colConfig: {minWidth: 90, resizable: false, sortable: false, comp: 'turnoverProgressStatus'}
        }
      ], // 列配置
    }
  },
  computed: {
    warehousingBtn() {
      return this.type === PAUSE && this.batchList.length
    }
  },
  methods: {
    // 打开弹框
    openDialog(obj) {
      this.batchList = obj.batchList || []
      this.type = obj.type || ''
      this.isInputSemisStore = false
      this.remarks = ''
      switch (this.type) {
        case PAUSE:
          this.dialogTitle = '工单暂停'
          this.dialogAlert = '可以选择需要暂停的批次，不选择则只暂停工单'
          break
        case RESUME:
          this.dialogTitle = '工单恢复'
          this.dialogAlert = '可以选择需要恢复的批次，不选择则只恢复工单'
          break
        case TERMINATE:
          this.dialogTitle = '工单终止'
          this.dialogAlert = '可以选择需要终止的批次，不选择则只终止工单'
          break
      }
      this.batchDialog = true
    },
    // 选中批次
    handleSelectionChange(val) {
      this.selectBatch = val
    },
    // 显示日志
    showLog() {
      this.$emit('showLog')
    },
    // 提交
    submit() {
      let obj = {
        type: this.type,
        reason: this.remarks,
        isInputSemisStore: this.isInputSemisStore
      }
      if (this.selectBatch.length) {
        obj.data = this.selectBatch.map(item => item.id)
      }
      this.$emit('submitBatch', obj)
    }
  }
}
</script>

<style scoped lang="less">
  .work_order_batch {
    .dialog_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
    }
    .dialog_alert {
      flex: 1;
    }
    .table_container {
      margin-bottom: 20px;
    }
    .pause_alert{
      color: #666;
      font-size: 12px;
    }
    .dialog_remarks {
      height: 60px;
      display: flex;
      align-items: center;
      border: 1px solid #dbe1e8;
    }
    .batch_footer{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
<style lang="less">
  .work_order_batch {
    .dialog_remarks {
      .el-textarea__inner {
        border: 0;
        font-size: 14px;
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 18px;
      }
    }
  }
</style>
